<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>WebSocket</title>
	</head>
	<body>
		<script>
			// 对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。

			// 打开一个 WebSocket 连接，我们需要在 url 中使用特殊的协议 ws 创建 new WebSocket 对象。
			// 同样也有一个加密协议 wss:// 协议。
			// let socket = new WebSocket('ws://localhost:8080/echo')
		</script>

		<script>
			// 一旦 socket 被建立，我们就应该监听 socket 上的事件。一共有4个事件：
			// open 连接已建立
			// message 接收到数据
			// error WebSocket 错误
			// close 连接已关闭
			// 如果要发送一些东西，那么可以使用 socket.send(data) 方法。

			// 示例代码：
			let socket = new WebSocket('ws://localhost:8080/echo')

			// 连接已建立
			socket.onopen = function (e) {
				console.log('[open] Connection established')
				console.log('Sending to server')
				socket.send('My name is WYN')
			}

			// 接收到数据
			socket.onmessage = function (e) {
				console.log('[message] Data received from server: ' + e.data)
			}

			// 连接已关闭
			socket.onclose = function (e) {
				if (e.wasClean) {
					console.log(`[close] Connection closed cleanly, code=${e.code} reason=${e.reason}`)
				} else {
					// 例如服务器进程被杀死或网络中断
					// 在这种情况下，e.code 通常为 1006
					console.log('[close] Connection died')
				}
			}

			// WebSocket 错误
			socket.onerror = function (e) {
				console.log(`[error] ${e.message}`)
			}
		</script>
	</body>
</html>
